import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: PinCodeTest()));

class PinCodeTest extends StatefulWidget {
  @override
  createState() => _PinCodeTestState();
}

class _PinCodeTestState extends State<PinCodeTest> {
  final _myController = TextEditingController();
  var value = '';
  @override
  build(context) => Scaffold(
        backgroundColor: Colors.blueAccent,
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              height: 300.0,
              width: double.infinity,
              color: Colors.white,
              child: Align(
                alignment: Alignment.center,
                child: Stack(
                  children: [
                    Center(
                      child: Container(
                        padding: EdgeInsets.only(top: 32.0),
                        height: 120.0,
                        width: 270.0,
                        child: TextField(
                          autofocus: true,
                          keyboardType: TextInputType.number,
                          onChanged: (text) {
                            setState(() {
                              value = text;
                            });
                            if (value.length >= 6) {
                              print('登录');
                            }
                          },
                          controller: _myController,
                          cursorColor: Colors.transparent,
                          cursorWidth: 0.0,
                          style: TextStyle(color: Colors.transparent),
                          inputFormatters: [
                            LengthLimitingTextInputFormatter(6),
                          ],
                          decoration: InputDecoration(border: InputBorder.none),
                        ),
                      ),
                    ),
                    Center(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          InputBall(value: value, index: 0),
                          InputBall(value: value, index: 1),
                          InputBall(value: value, index: 2),
                          InputBall(value: value, index: 3),
                          InputBall(value: value, index: 4),
                          InputBall(value: value, index: 5),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      );
}

class InputBall extends StatelessWidget {
  InputBall({@required this.value, this.index});
  final String value;
  final int index;
  @override
  build(context) => Padding(
        padding: EdgeInsets.only(left: 8.0),
        child: AnimatedContainer(
          duration: Duration(milliseconds: 200),
          height: value.length == index ? 50.0 : 40.0,
          width: value.length == index ? 50.0 : 40.0,
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: value.length <= index
                  ? Border.all(color: Colors.green, width: 2.0)
                  : Border.all(color: Colors.transparent, width: 0.0)),
          child: Center(
              child: Text(
            value.length <= index ? '' : value[index],
            style: TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.bold,
                fontSize: value.length >= index ? 26.0 : 52),
          )),
        ),
      );
}
